<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AgentScope</title>
    <link rel="stylesheet" type="text/css"
          href="{{ url_for('static', filename='css/size.css') }}">
    <link rel="stylesheet"
          href="{{ url_for('static', filename='css/colors.css') }}">
    <link rel="stylesheet" type="text/css"
          href="{{ url_for('static', filename='css/fonts.css') }}">
    <link rel="stylesheet"
          href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <link rel="stylesheet" type="text/css"
          href="{{ url_for('static', filename='css/components.css') }}">
    <link rel="stylesheet"
          href="{{ url_for('static', filename='css/run.css') }}">
</head>
<body>

<!-- Sidebar -->
<div id="sidebar">
    <div id="sidebar-title">AgentScope</div>
    <div class="sidebar-subtitle">Info</div>
    <div class="d-flex flex-column">
        <div id="run-info"></div>
    </div>

    <div class="sidebar-subtitle sidebar-margin-top">Detail</div>

    <div class="option-list">
        <div id="dialogue-option" class="project-list-item text-cannot-selected">
            <svg class="proj-icon" viewBox="0 0 1024 1024"
                 xmlns="http://www.w3.org/2000/svg">
                <path d="M272 416a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM464 416a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM656 416a48 48 0 1 0 96 0 48 48 0 1 0-96 0z"></path>
                <path d="M896 128H128c-35.2 0-64 28.8-64 64v448c0 35.2 28.8 64 64 64h160v192l192-192h416c35.2 0 64-28.8 64-64V192c0-35.2-28.8-64-64-64z m0 480c0 19.2-12.8 32-32 32H448l-96 96v-96H160c-19.2 0-32-12.8-32-32V224c0-19.2 12.8-32 32-32h704c19.2 0 32 12.8 32 32v384z"></path>
            </svg>Dialogue
        </div>

        <div id="code-option" class="project-list-item text-cannot-selected">
            <svg class="proj-icon" viewBox="0 0 1024 1024"
                 xmlns="http://www.w3.org/2000/svg">
                <path d="M44.100267 534.357333v-0.034133a33.655467 33.655467 0 0 1 0-47.854933v-0.068267l239.342933-239.138133a33.826133 33.826133 0 1 1 47.889067 47.854933l-215.415467 215.278933 215.415467 215.278934a33.792 33.792 0 0 1 0.068266 47.889066 34.065067 34.065067 0 0 1-47.957333-0.034133l-239.3088-239.138133-0.034133-0.034134z m534.528-427.008a34.133333 34.133333 0 1 1 65.9456 17.646934l-211.968 791.074133a34.133333 34.133333 0 1 1-65.9456-17.646933l211.968-791.074134z m401.271466 427.008l-239.342933 239.172267a34.065067 34.065067 0 0 1-47.957333 0.034133 33.792 33.792 0 0 1 0.068266-47.889066l215.415467-215.278934-215.415467-215.278933a33.826133 33.826133 0 1 1 47.889067-47.854933l239.3088 239.138133 0.034133 0.034133v0.034134a33.655467 33.655467 0 0 1 0 47.854933z">
                </path>
            </svg>Code
        </div>

        <div id="setting-option" class="project-list-item text-cannot-selected">
            <svg class="proj-icon" viewBox="0 0 1024 1024"
                 xmlns="http://www.w3.org/2000/svg">
                <path d="M965.824 405.952a180.48 180.48 0 0 1-117.12-85.376 174.464 174.464 0 0 1-16-142.08 22.208 22.208 0 0 0-7.04-23.552 480.576 480.576 0 0 0-153.6-89.216 23.104 23.104 0 0 0-24.32 5.76 182.208 182.208 0 0 1-135.68 57.92 182.208 182.208 0 0 1-133.12-56.64 23.104 23.104 0 0 0-26.88-7.04 478.656 478.656 0 0 0-153.6 89.856 22.208 22.208 0 0 0-7.04 23.552 174.464 174.464 0 0 1-16 141.44A180.48 180.48 0 0 1 58.24 405.952a22.4 22.4 0 0 0-17.28 17.792 455.08 455.08 0 0 0 0 176.512 22.4 22.4 0 0 0 17.28 17.792 180.48 180.48 0 0 1 117.12 84.736c25.408 42.944 31.232 94.592 16 142.08a22.208 22.208 0 0 0 7.04 23.552A480.576 480.576 0 0 0 352 957.632h7.68a23.04 23.04 0 0 0 16.64-7.04 184.128 184.128 0 0 1 266.944 0c6.592 8.96 18.752 11.968 28.8 7.04a479.36 479.36 0 0 0 156.16-88.576 22.208 22.208 0 0 0 7.04-23.552 174.464 174.464 0 0 1 13.44-142.72 180.48 180.48 0 0 1 117.12-84.736 22.4 22.4 0 0 0 17.28-17.792 452.613 452.613 0 0 0 0-176.512 23.04 23.04 0 0 0-17.28-17.792z m-42.88 169.408a218.752 218.752 0 0 0-128 98.112 211.904 211.904 0 0 0-21.76 156.736 415.936 415.936 0 0 1-112 63.68 217.472 217.472 0 0 0-149.12-63.68 221.312 221.312 0 0 0-149.12 63.68 414.592 414.592 0 0 1-112-63.68c12.8-53.12 4.288-109.12-23.68-156.096A218.752 218.752 0 0 0 101.12 575.36a386.176 386.176 0 0 1 0-127.36 218.752 218.752 0 0 0 128-98.112c27.2-47.552 34.944-103.68 21.76-156.8a415.296 415.296 0 0 1 112-63.68A221.44 221.44 0 0 0 512 187.392a218.24 218.24 0 0 0 149.12-57.984 413.952 413.952 0 0 1 112 63.744 211.904 211.904 0 0 0 23.04 156.096 218.752 218.752 0 0 0 128 98.112 386.65 386.65 0 0 1 0 127.36l-1.28 0.64z"></path>
                <path d="M512 320.576c-105.984 0-192 85.568-192 191.104a191.552 191.552 0 0 0 192 191.104c106.112 0 192.064-85.568 192.064-191.104a190.72 190.72 0 0 0-56.256-135.168 192.448 192.448 0 0 0-135.744-55.936z m0 318.528c-70.656 0-128-57.088-128-127.424 0-70.4 57.344-127.36 128-127.36 70.72 0 128 56.96 128 127.36 0 33.792-13.44 66.176-37.44 90.112a128.32 128.32 0 0 1-90.496 37.312z"></path>
            </svg>Setting
        </div>

        <a id="back-btn" class="text-cannot-selected" href="/">
            <svg class="back-svg" viewBox="0 0 1024 1024"
                 xmlns="http://www.w3.org/2000/svg">
                <path d="M723.872 478.4l-81.12-81.152L688 352l135.776 135.776L846.4 510.4 688 668.8l-45.248-45.28 81.12-81.12H384v-64h339.872zM576 896H256.192A64.16 64.16 0 0 1 192 831.84V192.16c0-35.424 28.704-64.16 64.192-64.16H576v64H288.224A31.968 31.968 0 0 0 256 223.744v576.512C256 817.44 270.4 832 288.224 832H576v64z"></path>
                </path>
            </svg>Logout
        </a>
    </div>

    <div id="sidebar-contact">
        <div class="sidebar-row">Feel free to contact us!</div>
        <div class="sidebar-row">
            <a id="ding-btn" class="share-btn" title="Dingding" href="https://qr.dingtalk.com/action/joingroup?code=v1,k1,eENWB2Lr4ic2vWjKDsjvI65YxceIsyuDcbfrNF+5+YA=&_dt_no_comment=1&origin=1">
                <svg class="share-img" viewBox="0 0 1024 1024"
                     xmlns="http://www.w3.org/2000/svg">
                    <path d="M879.36 393.813a174.933 174.933 0 0 1-11.307 29.014v1.28c-32.853 70.186-118.4 208-118.4 208l-24.96 42.666h120.534l-231.04 306.56 52.266-208.64H571.52l32.853-138.026c-26.666 6.4-58.24 15.36-95.573 27.306 0 0-50.56 29.654-145.493-56.96 0 0-64-56.533-26.88-70.613a1098.24 1098.24 0 0 1 124.586-20.053c64-8.747 104.534-13.44 104.534-13.44s-199.68 2.986-247.04-4.48-106.667-86.614-120.32-156.16c0 0-19.84-38.187 42.666-20.054s320 70.4 320 70.4-335.786-103.04-357.973-128S137.813 124.8 143.36 56.107a15.147 15.147 0 0 1 20.053-13.44S411.52 156.16 581.333 218.453s317.227 94.72 298.027 175.36z">
                    </path>
                </svg>
            </a>
            <a id="discord-btn" class="share-btn" title="Discord"
               href="https://discord.gg/eYMpfnkG8h">
                <svg class="share-img" viewBox="0 0 1280 1024"
                     xmlns="http://www.w3.org/2000/svg">
                    <path d="M1049.062 139.672a3 3 0 0 0-1.528-1.4A970.13 970.13 0 0 0 808.162 64.06a3.632 3.632 0 0 0-3.846 1.82 674.922 674.922 0 0 0-29.8 61.2 895.696 895.696 0 0 0-268.852 0 619.082 619.082 0 0 0-30.27-61.2 3.78 3.78 0 0 0-3.848-1.82 967.378 967.378 0 0 0-239.376 74.214 3.424 3.424 0 0 0-1.576 1.352C78.136 367.302 36.372 589.38 56.86 808.708a4.032 4.032 0 0 0 1.53 2.75 975.332 975.332 0 0 0 293.65 148.378 3.8 3.8 0 0 0 4.126-1.352A696.4 696.4 0 0 0 416.24 860.8a3.72 3.72 0 0 0-2.038-5.176 642.346 642.346 0 0 1-91.736-43.706 3.77 3.77 0 0 1-0.37-6.252 502.094 502.094 0 0 0 18.218-14.274 3.638 3.638 0 0 1 3.8-0.512c192.458 87.834 400.82 87.834 591 0a3.624 3.624 0 0 1 3.848 0.466 469.066 469.066 0 0 0 18.264 14.32 3.768 3.768 0 0 1-0.324 6.252 602.814 602.814 0 0 1-91.78 43.66 3.75 3.75 0 0 0-2 5.222 782.11 782.11 0 0 0 60.028 97.63 3.728 3.728 0 0 0 4.126 1.4A972.096 972.096 0 0 0 1221.4 811.458a3.764 3.764 0 0 0 1.53-2.704c24.528-253.566-41.064-473.824-173.868-669.082zM444.982 675.16c-57.944 0-105.688-53.174-105.688-118.478s46.818-118.482 105.688-118.482c59.33 0 106.612 53.64 105.686 118.478 0 65.308-46.82 118.482-105.686 118.482z m390.76 0c-57.942 0-105.686-53.174-105.686-118.478s46.818-118.482 105.686-118.482c59.334 0 106.614 53.64 105.688 118.478 0 65.308-46.354 118.482-105.688 118.482z">
                    </path>
                </svg>
            </a>
            <a id="wechat-btn" class="share-btn" title="WeChat"
               href="">
                <svg class="share-img" viewBox="0 0 1024 1024"
                     xmlns="http://www.w3.org/2000/svg">
                    <path d="M362.403292 95.115814C163.141681 95.115814 0 230.56555 0 403.339212c0 99.329806 54.179894 181.201646 145.081717 244.411523l-36.119929 108.961787 126.419753-63.811875c45.149912 9.029982 81.87184 18.059965 127.021752 18.059965 11.437978 0 22.875955-0.601999 33.711934-1.203998-7.223986-24.079953-11.437978-49.363904-11.437978-75.851852 0-158.325691 136.051734-286.55144 308.223398-286.55144 12.039976 0 23.477954 0.601999 34.915932 2.407995C696.51264 203.475603 540.594944 95.115814 362.403292 95.115814zM240.79953 339.527337c-24.681952 0-44.547913-19.865961-44.547913-44.547913 0-24.681952 19.865961-44.547913 44.547913-44.547913s44.547913 19.865961 44.547913 44.547913C285.347443 319.661376 265.481481 339.527337 240.79953 339.527337zM495.445032 339.527337c-24.681952 0-44.547913-19.865961-44.547913-44.547913 0-24.681952 19.865961-44.547913 44.547913-44.547913s44.547913 19.865961 44.547913 44.547913C539.992945 319.661376 520.126984 339.527337 495.445032 339.527337zM1024 629.69077c0-145.081717-145.081717-263.073486-307.621399-263.073486-172.171664 0-308.223398 117.99177-308.223398 263.073486 0 145.081717 136.051734 263.073486 308.223398 263.073486 36.119929 0 72.239859-9.029982 108.961787-18.059965l99.329806 54.179894-27.089947-90.299824C969.820106 783.802469 1024 711.56261 1024 629.69077zM620.660788 583.938859c-19.865961 0-36.119929-16.253968-36.119929-36.119929s16.253968-36.119929 36.119929-36.119929 36.119929 16.253968 36.119929 36.119929S640.526749 583.938859 620.660788 583.938859zM817.514403 583.938859c-19.865961 0-36.119929-16.253968-36.119929-36.119929s16.253968-36.119929 36.119929-36.119929 36.119929 16.253968 36.119929 36.119929S837.982363 583.938859 817.514403 583.938859z">
                    </path>
                </svg>
            </a>
        </div>
    </div>
</div>

<div id="main-content">
    <div id="dialog-panel">
        <div class="main-content-title">Conversation</div>
        <div id="dialog-list"></div>
        <div class="main-content-title">Logging</div>
        <div id="terminal"></div>
    </div>

    <div id="info-panel">
        <div class="main-content-title">Message</div>
        <div id="info-content"></div>
    </div>
</div>

<!--<div id="right-bar"></div>-->

<script type="text/javascript">
    var runInfo = {{ runInfo | tojson | safe }};
</script>

<script src="{{ url_for('static', filename='js/jquery-3.3.1.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/run.js') }}"></script>
<script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
</body>
</html>